{% extends "main.html" %}

{% block breadcrumb %}
<nav>
    <ul id="crumbs">
        <li><a href="/">{{ system_title }}</a></li>
        <li id="crumb_title">{{ str.preferences }}</li>
    </ul>
</nav>
{% endblock %}

{% block content %}

<section id="wide_content">

    <div class="vertical_table">
        <div class="table_row">
            <div class="header_cell">
                {{ str.user }}:
            </div>
            <div class="table_cell">
                {{ person.apps_username|default:"" }}
            </div>
        </div>
        <div class="table_row">
            <div class="header_cell">
                {{ str.name }}:
            </div>
            <div class="table_cell">
                {{ person.displayname|default:"" }}
            </div>
        </div>
        <div class="table_row">
            <div class="header_cell">
                {{ str.email }}:
            </div>
            <div class="table_cell">
                {{ person.email }}
            </div>
        </div>
        <div class="table_row">
            <div class="header_cell">
                {{ str.language }}:
            </div>
            <div class="table_cell">
                <select id="language" name="language" class="autosave">
                    <option value="estonian"{% ifequal preferences.language "estonian" %} selected{% endifequal %}>{{ str.lang_estonian }}</option>
                    <!--option value="english"{% ifequal preferences.language "english" %} selected{% endifequal %}>{{ str.lang_english }}</option>
                    <option value="russian"{% ifequal preferences.language "russian" %} selected{% endifequal %}>{{ str.lang_russian }}</option-->
                </select>
            </div>
        </div>
        <div class="table_row">
            <div class="header_cell">
                {{ str.timezone }}:
            </div>
            <div class="table_cell">
                <select id="timezone" name="timezone" class="autosave">
                    {% for tz in timezones %}
                    <option value="{{ tz }}"{% ifequal preferences.timezone tz %} selected{% endifequal %}>{{ tz }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>

</section>

<script>
    $(document).ready(function(){
        $('.autosave').change(function() {
            autoSave($(this), {});
        });

        function autoSave(input, data) {
            if(!data['field']) data['field'] = input.attr('name');
            if(!data['value']) data['value'] = input.val();

            $.post('/preferences', data, function(json) {
                input.effect("highlight", {}, 1000);
            }, "json");
        }
    });
</script>

{% endblock %}